<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="back()">
				<image src="../../static/images/common/back.png" class="back-img"></image>
			</view>
			<view class="top-bar-center">
				<view class="title">
					好友请求
				</view>
			</view>
			<view class="top-bar-right">
				<view class="pice">

				</view>
			</view>
		</view>
		<view class="main">
			<view v-show="requestList.length == 0" class="dontRequestTip">暂无好友请求</view>
			<view class="requester" v-for="(item,index) in requestList" :key="index">
				<!-- 这里的v-if也许需要优化 -->
				<view class="request-top">
					<view class="reject btn" @tap="rejectRequest(item.id)" v-if="item.state ==0">
						拒绝
					</view>
					<view  class="agreed btn" v-if="item.state ==-1">已拒绝</view>
					<view class="rejecthidden btn"  v-if="item.state ==1">
						拒绝
					</view>
					<view class="header-img">
						<image :src="item.profilePhoto" ></image>
					</view>
				<!-- 	<view class="header">
						
					</view> -->
					<view class="agree btn" @tap="agreeRequest(item.id,item.username)" v-if="item.state == 0">
						同意
					</view>
					<view  class="agreed btn" v-if="item.state ==1">已同意</view>
					<view class="agreehidden btn"  v-if="item.state ==-1">
						同意
					</view>
					
				</view>
				<view class="request-center">
					<view class="title">
						{{item.nickname}}
					</view>
					<view class="time">
						{{changeTime(item.sendTime)}}
					</view>
				</view>
				<view class="notice">
					<text>留言：{{item.message}}</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// import data from '../../commons/js/data.js'
	import request from '../../api/request.js';
	import myfun from '../../commons/js/myfun.js';
	export default {
		data() {
			return {
				requestList:[]
			}
		},
		onLoad() {
			this.getRequestList()
			this.$store.commit("removeAcquire")
		},
		methods: {
			//处理时间
			changeTime(date) {
				return myfun.dateTime2(date);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		 async getRequestList(){
				let res = await request({
					url: '/friend/request?username='+uni.getStorageSync("userInfo").username,
					method: 'GET'
				});
				this.requestList = res[1].data.data;
				console.log(this.requestList)
			},
		async	rejectRequest(id){
				let res = await request({
					url: '/friend/request/reject?id='+id,
					method: 'POST'
				});
				uni.showToast({
					title: "已拒绝该用户的好友请求",
					duration: 2000
				});
				this.getRequestList()
				//this.requestList = res[1].data.data;
				
			},
		async	agreeRequest(id,username){
				let res = await request({
					url: '/friend/request/agree?id='+id,
					method: 'POST'
				});
				uni.showToast({
					title: "已同意该用户的好友请求",
					duration: 2000
				});
				this.getRequestList()
				this.sendAgreeMsg(username)
				//this.requestList = res[1].data.data;
			},
			sendAgreeMsg(username){
				console.log('username',username)
				let newMessage ={
									chatType: 'private',
									fromUser: uni.getStorageSync("userInfo").username,
									id: "0",
									messageContent:{
										username:uni.getStorageSync("userInfo").username,//用户id
										profilePhoto:uni.getStorageSync("userInfo").profilePhoto,
										message:"我同意了你的好友请求，现在可以开始聊天了！",
										types:0,  //区分聊天信息的类型   文本  图片  语音  位置   
										time:new Date(),
										tip:1,
										nickname:uni.getStorageSync("userInfo").nickname
									},
									messageType: 0,  //区分是聊天信息还是好友请求
									profilePhoto: null,
									sendTime: new Date(),
									toUser: username
								}
								// var dataMsg = {
								// 	msg:newMessage,
								// 	msg_list:this.$store.getters.getChatHistory(username)
								// }
								// this.$store.commit("updateChatMsg",dataMsg)
								// this.$store.commit("changDialogueInfo",newMessage)
								this.sendMsg(newMessage,username)
							//	this.goBottom()			
			},
			sendMsg(info,username){
				//console.log("发送的信息为："+info)
					  var Msg = {
					      "message": info,
					      "username": uni.getStorageSync("userInfo").username,
					      "to": username
					  };
					  console.log("发送的信息为：",Msg)
				this.$store.dispatch('webSocketSend', Msg);  
			},
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";

	.top-bar {
		background-color: rgba(255, 255, 255, 0.96);
		border-bottom: 1px solid $uni-border-color;
		.top-bar-left{
			float: left;
			padding-left: 32rpx;
			 // background-color: #eee;
			width: 88rpx;
			height: 88rpx;
			.back-img{
				margin-top: 21rpx;
				width: 46rpx;
				height: 46rpx;
			}
		}
		.title{
			margin-top: env(safe-area-inset-top);
			font-size: 35rpx;
			font-family: PingFangSC-Regular;
			// padding-top: 20rpx;
			line-height: 88rpx;
		}
	}
	.main{
		font-family: PingFangSC-Regular;
		padding: 108rpx $uni-spacing-col-base ;
		.requester{
			margin-top: 112rpx;
			padding: $uni-spacing-col-base;
			background-color: rgba(255,255,255,1);
			box-shadow: 0px 24rpx 64rpx -8rpx rgba(0,0,0,0.1);
			border-radius: 40rpx;
		}
		.request-top{
			display: flex;
			flex-direction: row;
			.btn{
				text-align: center;
				flex: none;
				width: 160rpx;
				height: 64rpx;
				border-radius: 40rpx;
				
				font-size: 32rpx;
				line-height: 64rpx;
				
			}
			.rejecthidden{
				background-color:#FFEEEE;
				color:#CCC2C2;
			}
			.agreehidden{
				background-color:#fff296;
				color:#CCC2C2;
			}
			.reject{
					background-color: rgba(255,93,91,0.1);
					color:$uni-color-warning ;
			}
			.agree{
				background-color: $uni-color-primary;
				color:$uni-text-color ;
			}
			.agreed{
				background-color: $uni-bg-color-grey;
				color:$uni-text-color ;
			}
			.header-img{
				margin-top: -104rpx;
				flex: auto;
				text-align: center;
				image{
					width: 144rpx;
					height: 144rpx;
					border-radius:50% ;
					background-color: $uni-text-color-disable;
				}
				
			}
		}
		.request-center{
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			.title{
				font-size: 36rpx;
				font-weight: 500;
				line-height: 50rpx;
				
			}
			.time{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-disable;
				line-height: 34rpx;
			}

		}
		.notice{
			padding: $uni-spacing-row-sm $uni-spacing-col-base;
			border-radius: $uni-border-radius-base;
			font-size: $uni-font-size-base;
			background-color: $uni-bg-color-grey;
			color: $uni-text-color;
			line-height: 40rpx;
		}
	}
	.dontRequestTip{
		font-size: 50rpx;
		color: $uni-text-color-grey;
		margin-left: 30%;
		padding-top: 50%;
	}
</style>
